<!DOCTYPE html>

<html>
   <head>
      <title>Phishing</title>
      <link type="text/css" rel="stylesheet" href="../../css/minigames/phishing.css" />
      <script src="../../javascript/phishing.js"></script>
      <script src="../../main.js"></script>
      <script src="../../data.js"></script>
   </head>
   <body>
      <div id="chat"></div>
      <div id="loot-notice"></div>

      <div id="sidebar">
         <p id="notoriety-counter"></p>
         <p id="xp-counter"></p>
         <br />
         <p id="chunk-counter"></p>
      </div>

      <div id="combat-box" class="hidden">
         <div id="virus-name"></div>
         <div id="virus-health"></div>
         <div id="virus-box">
            <img id="virus-img" />
         </div>
         <button>Attack</button>
      </div>

      <div id="tutorial" class="hidde">
         <div class="label">Tutorial</div>
         <div class="segment">
            <img src="../../images/phishing/left-click.png" />
            Left Click to cast.
         </div>
         <div class="segment">
            <img src="../../images/phishing/right-click.png" />
            Right Click to reel.
         </div>
      </div>


      <!-- Menu -->
      <button id="open-menu">Menu</button>
      <div id="menu" class="menu-panel hidden">
         <div class="row">
            <div id="menu-almunac-opener" class="item">
               <div class="label">Almunac</div>
               <img src="../../images/phishing/almunac.png" />
            </div>
            <div id="menu-upgrades-opener" class="item">
               <div class="label">Upgrades</div>
               <img src="../../images/phishing/upgrades.png" />
            </div>
            <div id="menu-quests-opener" class="item">
               <div class="label">Quests</div>
               <img src="../../images/phishing/quests.png" />
            </div>
         </div>
         <button id="close-menu">Close</button>
      </div>
      <div id="menu-almunac" class="menu-panel hidden"></div>
      <div id="menu-almunac-viewer" class="menu-panel hidden">
         <h3 class="name"></h3>
         <img />
         <p class="description"></p>
         <h3>Statistics</h3>
         <div class="left-column">
            <p>Times phished</p>
         </div>
         <div class="right-column">
            <p class="times-phished">2</p>
         </div>
      </div>
      <div id="menu-upgrades" class="menu-panel hidden">
         <p><b>Your upgrades</b></p>
         <div id="menu-upgrades-container" class="row"></div>
         <button>Back</button>
      </div>
      <div id="menu-upgrades-shop" class="menu-panel hidden">
         <p><b>Upgrades</b></p>
         <div id="menu-upgrades-shop-container"></div>
         <div class="button-container">
            <button class="clear">Clear</button>
            <button class="close">Back</button>
         </div>
      </div>
      <div id="menu-upgrades-upgrade-viewer" class="menu-panel hidden">
         <p class="title"></p>
         <div class="spread">
            <div class="requirements"></div>
            <img />
            <div class="stats"></div>
         </div>
         <p class="description"></p>
         <div class="button-container">
            <button class="use"></button>
            <button class="back">Back</button>
         </div>
      </div>
      <div id="menu-quests" class="menu-panel hidden">
         <button>Back</button>
      </div>
   </body>
</html>